<template>
	<div class="header" :class="[gd]">
		<div class="header-back" :class="[zuo]">
			<span class="iconfont" >&#xe641;</span>
		</div>
	  <div class="header-search" :class="[zhongj]">
	  	<span class="iconfont" >&#xe627;</span>
	  	上海海昌海洋公园</div>  
      <router-link to="/location">
		<div class="header-city" :class="[you]">
			{{this.$store.state.city}}
			<span class="iconfont">&#xe658;</span>
			</div>
      </router-link>
	</div>
   
</template>

<script>
	//	定义输出组件name
export default {
  name: 'homeHeader',
  props:['city'],
  data(){
   return{
     gd:"gd",
     zuo:"zuo",
     you:'you',
     zhongj:'zhongj'
     
   }
 },
 methods:{
   //   定义滚动距离
  scrollChange(){
   let hight = document.documentElement.scrollTop
  //  console.log(hight)
   if(hight>200){
      this.gd="gd"
      this.zuo="zuo"
      this.you="you"
      this.zhongj="zhongj"
   }else{
     this.gd=""
     this.zuo=""
      this.you=""
      this.zhongj=""
   }
  }
 },
 mounted(){
	//   定义监听滚动事件
		 window.addEventListener('scroll',
		 this.scrollChange)
	 }
}   
 
</script>

  <!--给css样式设置语言工具stylus-->
<style scoped="scoped">
    
  .header{
    width: 100%;
    height: 35px;
  }
  .header-back,.header-search,.header-city{
    
    text-align:center;

    }
    .header-back{
      height: 23px;
      position: absolute;
      left: 0px;
      top:0px;
      width: 10%;
    padding-top: 12px;
    }
  
    .header-search{
      height: 25px;
      /*定义自动补位*/
      /*flex:1;*/
      border: #ccc solid 1px;
      border-radius:30px;
    width:64%;
      /*height: 17px;*/
      margin-top: 7px;
      background-color: beige;
      position: absolute;
      left: 36px;
      opacity:0.7;
    }
    .header-search span{
      margin-top: 4px;
      display: inline-block;
    }
    .header-city{
      height: 23px;
    /*float:right;*/
    width: 25%;
    position: absolute;
      top: 0px;
      right: 0px;
    padding-top: 12px;
    }
      .gd{
      position: fixed;
      top: 0px;
      left: 0px;  
      background-color: #fff;
    }
    .zuo{
      background-color: #fff;
      color: #000;
    }
    .you{
      background-color: #fff;
    }
    .zhongj{
      background-color: #ccc;
      color: coral;
      /* opacity:1; */
    }
</style>

